<template>
	<div>
		<jk-dialog
			v-model="showDialog"
			title="样纱配置"
			width="500px"
			:show-content-loading="showLoading"
			:confirm-btn-loading="confirmBtnLoading"
			@on-visible-change="onVisibleChange"
			@on-cancel="onVisibleChange"
			@on-confirm="onConfirmBtn"
		>
			<el-form ref="ruleForm" :model="ruleForm" :rules="rules" :show-message="false" label-width="130px">
				<el-row>
					<el-col :span="22">
						<el-form-item label="最小数量(kg)" prop="minValue2" class="margin-bottom-10">
							<el-input-number v-model="ruleForm.minValue" :min="0" controls-position="right" class="width-100-percent" placeholder="最小数量(kg)" />
						</el-form-item>
					</el-col>
					<el-col :span="22">
						<el-form-item label="最大数量(kg)" prop="maxValue" class="margin-bottom-10">
							<el-input-number v-model="ruleForm.maxValue" :min="0" controls-position="right" class="width-100-percent" placeholder="最大数量(kg)" />
						</el-form-item>
					</el-col>
					<el-col :span="22">
						<el-form-item label="批号" prop="batchCode" class="margin-bottom-10 width-100-percent">
							<jk-input v-model="ruleForm.batchCode" placeholder="批号"></jk-input>
						</el-form-item>
					</el-col>
					<!--<el-col :span="22">
						<el-form-item label="排序" prop="sortNum" class="margin-bottom-10">
							<el-input-number v-model="ruleForm.sortNum" class="width-100-percent" controls-position="right" :min="0" />
						</el-form-item>
					</el-col>-->
				</el-row>
			</el-form>
		</jk-dialog>
	</div>
</template>

<script>
    import calHeight from '/src/mixins/cal-dialog-height';
    import {
        productionTestProductConfigPage,
        productionTestProductConfigSaveOrUpdateBatch
    } from '../../../../api/production/order';
    import { tipsBar } from '../../../../utils/jk/jk-tool';
    import { validateCode, validateNull } from '../../../../utils/jk/validator';
    export default {
        components: {
        },
        props: {
            dialogState: {
                type: Boolean,
                default: false
            },
            dataId: {
                type: [Number, String],
                default: null
            }
        },
        mixins: [calHeight],
        data() {
            return {
                showDialog: false,
                showLoading: true,
                confirmBtnLoading: false,
                tableData: [],
                defaultRowItem: {
                    minValue: null,
                    maxValue: null,
                    batchCode: '',
                    sortNum: null
                },
                ruleForm: {
                    minValue: null,
                    maxValue: null,
                    batchCode: '',
                    sortNum: null
                },
                rules: {
                    batchCode: [{ required: true, trigger: 'change' }],
                    minValue: [{ required: true, trigger: 'change' }],
                    maxValue: [{ required: true, trigger: 'change' }]
                }
            };
        },
        methods: {
            onAddBtn(index) {
                if (index || index === 0) {
                    this.tableData.splice(index + 1, 0, JSON.parse(JSON.stringify(this.defaultRowItem)));
                } else {
                    this.tableData.push(JSON.parse(JSON.stringify(this.defaultRowItem)));
                }
            },
            onConfirmBtn() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        this.saveRequest();
                    }
                });
            },
            saveRequest() {
                this.confirmBtnLoading = true;
                const params = JSON.parse(JSON.stringify(this.ruleForm));
                productionTestProductConfigSaveOrUpdateBatch({
                    list: [params]
                }).then(res => {
                    this.confirmBtnLoading = false;
                    if (res.data.status === 200) {
                        tipsBar(this, 'save');
                        this.$emit('on-finish');
                    }
                });
            },
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
                if (!e) {
                    Object.assign(this.$data, this.$options.data());
                }
            },
            getDetailRequest() {
                return productionTestProductConfigPage().then(res => {
                    if (res.data.status === 200) {
                        this.ruleForm = res.data.res && res.data.res.length ? res.data.res[0] : {};
                    }
                });
            },
            async getDependentData() {
                this.showLoading = true;
                await this.getDetailRequest();
                this.showLoading = false;
                this.$nextTick(() => {
                    this.$refs.ruleForm.clearValidate();
                });
            }
        },
        watch: {
            dialogState(newVal) {
                this.showDialog = newVal;
                if (newVal) {
                    this.getDependentData();
                }
            }
        }
    };
</script>
